

<template>
  <div class="bgColor">
    <div class="mainbox">
      <div class="categoryBox">
        <div class="divbox">
          <span class="label">所属分类：</span>
          <ul class="tabbox">
            <li
              @click="tabHandle(index, item, 1)"
              class="tabItem"
              v-for="(item, index) in tabList"
              :class="{ activeCss: index == currentIndex }"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div v-if="resultList.length > 0">
        <div
          class="itemcss"
          v-for="(item, index) in resultList"
          @click="gotoDetail(item)"
        >
          <div class="leftbox">
            <p class="day">{{ item.datePublish.substring(8, 10) }}</p>
            <p class="yue">{{ item.datePublish.substr(0, 7) }}</p>
          </div>
          <div class="rightbox">
            <div>
              <p class="title">{{ item.title }}</p>
              <p class="text">
                {{ item.content }}
              </p>
            </div>
            <img class="cover" :src="item.coverUrl || staticImg" alt="" />
          </div>
        </div>
      </div>
      <empty v-else></empty>
      <div class="pagination" v-if="resultList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next,total,jumper"
          :total="total"
          @current-change="sizeChange"
          :size="params.pageSize"
          v-model:current-page="params.pageNum"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { getNewsType, getNewsList } from '@/api/api.js'
import { useRoute, useRouter } from 'vue-router'
import { reactive } from 'vue'
import staticImg from '@/assets/news.png'
import { eventBus } from '@/utils/eventBus.js'
import empty from '@/components/empty.vue'
const currentIndex = ref(0)
const tabList = ref([])
const params = reactive({
  projectGroupId: '2utrackwo41egqxjetrgja',
  pageNum: 1,
  pageSize: 12,
  type: '',
  title: '',
})
const router = useRouter()
const resultList = ref([])
const total = ref(0)
function webListApi() {
  getNewsList(params).then((res) => {
    resultList.value = res.rows
    total.value = res.total
  })
}
function tabHandle(index, item, type) {
  if (type == 1) {
    currentIndex.value = index
    params.type = item.id
  }
  webListApi()
}
webListApi()

function sizeChange(size) {
  params.page = size
  webListApi()
}

function gotoDetail(item) {
  router.push({
    path: '/site/newsdetail',
    query: {
      id: item.id,
    },
  })
}
function searchHandle(value) {
  params.title = value
  webListApi()
}
onMounted(() => {
  eventBus.$off('searchHandleNews', searchHandle)
  eventBus.$on('searchHandleNews', searchHandle)
})
onBeforeUnmount(() => {
  eventBus.$off('searchHandleNews', searchHandle)
})
function mediaApi() {
  getNewsType({ projectId: '2utrackwo41egqxjetrgja' }).then((res) => {
    tabList.value = JSON.parse(res.newsTypelist).obj
    tabList.value.unshift({
      id: '',
      name: '全部',
    })
  })
}
mediaApi()
</script>
<style lang="scss" scoped>
.title {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #2e2f33;
  margin-bottom: 16px;
}
.cover {
  width: 320px;
  height: 180px;
  border-radius: 8px;
  margin-left: 80px;
}
.rightbox {
  padding: 30px;
  display: flex;
}
.day {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 80px;
  color: #2e2f33;
  height: 80px;
  line-height: 80px;
  margin-bottom: 6px;
  text-align: left;
  text-indent: 0; /* 确保没有缩进 */
  position: relative;
  left: -6px;
}
.yue {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 24px;
  color: #2e2f33;
}
.leftbox {
  width: 205px;
  height: 240px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
  padding-left: 26px;
}
.itemcss {
  width: 1280px;
  height: 240px;
  margin-bottom: 30px;
  display: flex;
  cursor: pointer;
}
.itemcss:hover {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  .title {
    color: #178fd1;
  }
  .leftbox p {
    color: #fff;
  }
  .leftbox {
    background: url('../assets/active.png');
    background-position: left top;
  }
}

.switch {
  margin-left: 24px;
}
.activeCssOrder {
  background: #178fd1;
  color: #fff;
  border-radius: 4px 4px 0px 0px;
}
.text {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #45474d;
  line-height: 32px;
  min-width: 613px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boxflex {
  display: flex;
  li {
    padding: 9px 16px;
    margin-right: 8px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
  }
}
.box {
  border-bottom: 1px solid #178fd1;
  display: flex;
  align-items: center;
  margin-top: 32px;
  height: 42px;
}
.opera {
  cursor: pointer;
  position: relative;
  top: 4px;
  .img {
    position: relative;
    top: 2px;
  }
  span {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #178fd1;
  }
}
.divbox {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.divbox:last-child {
  margin-bottom: 0px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 20px;
}
.majorList {
  display: flex;
  flex-wrap: wrap;
}
.tabItem:last-child {
  margin-right: 0;
}
.bgColor {
  min-height: 528px;
}
.flexbox {
  display: flex;
  justify-content: space-between; /* 实现两端对齐 */
  margin-bottom: 6px;
}
.flex {
  display: flex;
  align-items: center;
}
.spancss {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #8d9099;
  margin-left: 8px;
}

.infobox {
  padding: 8px 12px 0px 12px;
}
.itembox {
  width: 305px;
  height: 286px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-top: 28px;
  margin-right: 20px;
  transition: transform 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  .majorimg {
    height: 172px;
    width: 100%;
  }
}
.itembox:hover {
  transform: translateY(-8px);
  box-shadow: 0px 4px 12px 0px rgba(0, 39, 60, 0.12);
  .title {
    color: #178fd1;
  }
}
.itembox:nth-child(4n) {
  margin-right: 0;
}
.activeCss {
  background: #e6f3fa;
  color: #178fd1 !important;
  border-radius: 50px 50px 50px 50px;
}
.label {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2e2f33;
  flex-shrink: 0;
  margin-top: 4px;
}
.tabItem {
  padding: 4px 14px;
  cursor: pointer;
  margin: 0 20px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #45474d;
  margin-bottom: 4px;
  height: 34px;
}
.tabbox {
  display: flex;
  flex-wrap: wrap;
  width: 1092px;
  overflow: hidden;
  height: 37px;
}
.categoryBox {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin: 30px 0;
  margin-bottom: 30px;
  padding: 30px;
}
.setHeight {
  height: auto !important;
}
</style>
